<template>
	<div>
		<el-form :inline="true" class="search-form" :model="searchData">
			<el-form-item label="用户名称">
				<el-input v-model="searchData.nickName" placeholder="请输入用户名称"></el-input>
			</el-form-item>
			<el-form-item label="用户角色">
				<el-select v-model="searchData.role" style="width: 240px" class="m-2" size="large">
					<el-option :key="0" label="全部" :value="0" />
					<el-option v-for="item in roleWithAuthList" :key="item.roleId" :label="item.roleName" :value="item.roleId" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSearchUser">查询</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="userList" border style="width: 100%">
			<el-table-column prop="id" label="编号" width="180" />
			<el-table-column prop="nickName" label="用户昵称" width="180" />
			<el-table-column prop="role" label="用户角色">
				<template #default="scope">
					<el-button v-for="item in scope.row.roles" :key="item.role" link type="primary" size="small">
						{{ item.roleName }}
					</el-button>
				</template>
			</el-table-column>
			<el-table-column prop="role" label="操作">
				<template #default="scope">
					<el-button link type="primary" size="small" @click="onEditUser(scope.row)">编辑</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 编辑用户的弹出窗-->
		<el-dialog v-model="editShow" title="编辑用户信息">
			<el-form :model="editUser">
				<el-form-item label="用户昵称" label-width="120px">
					<el-input v-model="editUser.nickName" class="w192" autocomplete="off" />
				</el-form-item>

				<el-form-item label="用户角色" label-width="120px">
					<el-select v-model="editUser.roles" multiple class="m-2" size="large" placeholder="请选择角色">
						<el-option
							v-for="item in roleWithAuthList"
							:key="item.roleId"
							:label="item.roleName"
							:value="item.roleId"
						/>
					</el-select>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editShow = false">取消</el-button>
					<el-button type="primary" @click="ensureEditUser">修改</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { getRoleList } from '@/api/role'
import { getUserList } from '@/api/user'

interface IRoleItem {
	role: number
	roleName: string
}

interface IUserItem {
	id: number
	nickName: string
	userName: string
	roles: IRoleItem[]
}

interface IRoleWithAuth {
	roleId: number
	roleName: string
	auth: []
}

interface IEditUser {
	id: number
	nickName: string
	roles: number[]
}

const userList = ref<IUserItem[]>([])
const searchData = reactive({
	nickName: '',
	role: 0
})
const roleWithAuthList = ref<IRoleWithAuth[]>([])
const editShow = ref(false)
const editUser = reactive<IEditUser>({
	id: 0,
	nickName: '',
	roles: []
})

// 搜索啥的之后就这样写了  但是这样不好
const onSearchUser = () => {
	let res: IUserItem[] = []
	if (searchData.nickName || searchData.role) {
		console.log(searchData.nickName, searchData.role, userList.value)
		if (searchData.nickName) {
			res = userList.value.filter((user) => user.nickName.indexOf(searchData.nickName) > -1)
		}
		if (searchData.role) {
			res = (res.length > 0 ? res : userList.value).filter((user) => {
				return user.roles.findIndex((item) => item.role === searchData.role) > -1
			})
		}
	} else {
		res = userList.value
	}
	userList.value = res
}

const onEditUser = (user: IUserItem) => {
	Object.assign(editUser, { ...user, roles: user.roles.map((v) => v.role) })
	editShow.value = true
}

const ensureEditUser = () => {
	const user = userList.value.find((item) => item.id === editUser.id)!
	user.userName = editUser.nickName
	user.roles = []
	roleWithAuthList.value.forEach((item) => {
		if (editUser.roles.find((it) => it === item.roleId)) {
			user.roles.push({
				role: item.roleId,
				roleName: item.roleName
			})
		}
	})
	editShow.value = false
}

onMounted(() => {
	getUserList().then((resp) => {
		userList.value = resp
	})
	getRoleList().then((resp) => {
		roleWithAuthList.value = resp
	})
})
</script>

<style lang="less" scoped>
.search-form {
	padding: 10px 0 0 10px;
}

.w192 {
	width: 192px;
}
</style>
